<template>
  <div style="height: 100%;flex-direction: column;display: flex;overflow: auto;">
    <div v-if="(!!props.searchResult)||(props.isSearching)" class="title">
      {{ props.searchQuery }}
    </div>
    <div class="results-container">
      <div v-if="!!props.searchResult" class="result-container" v-for="res in props.searchResult" :key="res.text.slice(0,10)">
        {{ res.text }}<br/><br/>出处：{{ res.source }}<br/>score:{{ res.score }}
      </div>
      <div v-if="(!!props.searchResult)&&(props.searchResult.length === 0)" class="result-container">无结果</div>
      <div style="margin-top: 3em;" v-loading="props.isSearching" v-else/>
    </div>
  </div>
</template>

<script setup>
const props = defineProps(['searchResult', 'isSearching', 'searchQuery'])
</script>

<style lang="scss" scoped>
.title{
  text-align: center;
  font-weight: 700;
  padding: 10px 0;
  border-bottom: 1px solid #dfdfdf;
}
.results-container{
  overflow: auto;
  flex-grow: 1;
  .result-container{
    word-break:break-all;
    text-align: left;
    padding: 0.2em 0.5em;
    border-radius: 0.5em;
    border: 1px solid #dfdfdf;
    margin: 0.5em 1em;
    font-size: .9em;
  }
}
</style>
